import { Component } from 'react'
import Taro from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import './index.scss'
import global from '../../global';
import { ScrollView, Button, Map, Swiper, SwiperItem, Picker, Input, Image } from '@tarojs/components'
import Request from "../../api";
import Event from "../../event";
import {debounce} from '../../utils';

export default class Index extends Component {

  constructor(props) {
    super(props);
    this.state = {
      house: {}
    };
    this.updateRemindStatus = this.updateRemindStatus.bind(this);
  }

  componentWillMount () {
    this.setState({
      house: global.displayHouse
    })
    this.updateRemindStatus()
  }

  componentWillUnmount () {}

  componentDidHide () { }

  async updateRemindStatus() {
    try {
      let res = await Request.get(`/business/operation_remind/updateStatus/${global.displayHouse.rentalHouseId}/RENT_HOUSE/${global.userInfo.userId}`);
      if (res.data.code !== 200) {
        throw new Error();
      }
      console.log(res.data.data)
    } catch (e) {
      console.log("更新状态异常")
    }
  }

  render () {
    let  {house} = this.state;
    let picComponents = [
      <SwiperItem>
        <View style={{textAlign: 'center', alignItems: 'center',display: 'flex', justifyContent: 'space-between', height: '100%', borderBottom: '2px solid grey'}}>
          <View style={{width: '100px', margin: '0 auto'}}>暂无图片</View>
        </View>
      </SwiperItem>
    ]
    if (house.pics) {
      picComponents = house.pics.split(",").map(item => (
        <SwiperItem>
          <Image className='swiper_image' mode={"widthFix"} src={Request.imgHost + item}/>
        </SwiperItem>
      ));
    }

    return (
      <View className='house_info_display'>
        <Swiper
          className='banner-swiper'
          indicatorColor='#00000020'
          indicatorActiveColor='#fff'
          circular
          autoplay={true}
          indicatorDots>
          {
            picComponents
          }
        </Swiper>
        <View className='info_container'>
          <View className='info_title'>
            {house.title}
          </View>
          <View className='tags'>
            {
              house.direction && <Text>{house.direction}</Text>
            }
            {
              house.area && <Text>{house.area}</Text>
            }
            {
              house.level && <Text>{house.level}</Text>
            }
            {
              house.model && <Text>{house.model}</Text>
            }

          </View>
          <View className='rent'>
            {house.rent}
          </View>
          <View className='village'>
            <View>
              <Text className='village_label'>小区</Text>
              <Text className='village_value'>{house.village}</Text>
            </View>
            <View>
              <Text className='village_label'>地址</Text>
              <Text className='village_value'>{house.address}</Text>
            </View>
          </View>
          <View className='des'>
            {house.des || '暂无详细描述信息'}
          </View>
        </View>
        <Button className='phone_btn' onClick={() => {
          Taro.makePhoneCall({
            phoneNumber: house.phone
          })
        }}>电话联系</Button>
      </View>
    )
  }
}
